// 公用样式
.d-flex {
    display: flex;
}

.d-inline-flex {
    display: inline-flex;
}

.d-inline {
    display: inline;
}

.d-inline-block {
    display: inline-block;
}

.d-block {
    display: block;
}

.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

.justify-around {
    justify-content: space-around;
}

.justify-start {
    justify-content: flex-start;
}

.justify-end {
    justify-content: flex-end;
}

.align-center {
    align-items: center;
}

.align-stretch {
    align-items: stretch;
}

.align-start {
    align-items: flex-start;
}

.align-end {
    align-items: flex-end;
}

.flex-fill {
    flex: 1;
}

.flex-col {
    flex-direction: column;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-shrink {
    flex-shrink: 0;
}

.float-r {
    float: right;
}

.float-l {
    float: left;
}

.clear {
    &::after {
        display: block;
        content: "";
        clear: both;
    }
}

// 字体尺寸
.fn-xs {
    font-size: $font-size-xs;
}

.fn-sm {
    font-size: $font-size-sm;
}

.fn-md {
    font-size: $font-size-md;
}

.fn-lg {
    font-size: $font-size-lg;
}
.fn-xl {
    font-size: $font-size-xl;
}
.fn-bold {
    font-weight: bold;
}

.fn-center {
    text-align: center;
}

.fn-left {
    text-align: start;
}

.fn-right {
    text-align: end;
}

.fn-middle {
    vertical-align: middle;
}

.fn-wrap {
    white-space: normal;
    word-break: break-word;
}

.fn-nowrap {
    white-space: nowrap;
}

$i: 10;
@while $i<=40 {
    .fn-#{$i} {
        font-size: $i * 2 + rpx;
    }

    $i: $i + 1;
}

// 尺寸
$i: 1;

@while $i <=100 {
    .w-#{$i} {
        width: $i * 2 + rpx;
    }

    .h-#{$i} {
        height: $i * 2 + rpx;
    }

    $i: $i + 1;
}
$i: 1;
@while $i <=24 {
    .w-#{$i}\/#{24} {
        width: #{$i/24 * 100}#{"%"};
    }

    .h-#{$i}\/#{24} {
        height: #{$i/24 * 100}#{"%"};
    }

    $i: $i + 1;
}

.w-max {
    width: 100%;
}

.h-max {
    height: 100%;
}

// 边框
$dir1: (top t, right r, bottom b, left l);
$dir2: (top left tl, top right tr, bottom right br, bottom left bl);
// 间距
$pad: (
    base: $padding-base,
    xs: $padding-xs,
    sm: $padding-sm,
    md: $padding-md,
    lg: $padding-lg,
    xl: $padding-xl,
);
$color-list: (
    gray-1 $gray-1,
    gray-2 $gray-2,
    tips $tips,
    plain $white,
    error $red,
    theme $theme,
    bg $bg,
    panel-1 $panel-1,
    light $white,
    \white$white,
    blue$blue,
    \red$red,
    \yellow$yellow,
    \green$green,
    success $green
);
.rounded {
    border-radius: $border-radius-md;
}

.rounded-sm {
    border-radius: $border-radius-sm;
}

.rounded-md {
    border-radius: $border-radius-md;
}

.rounded-lg {
    border-radius: $border-radius-lg;
}

.rounded-max {
    border-radius: $border-radius-max;
}

.rounded-x {
    border-radius: 50rem;
}

@each $item1, $item2, $item3 in $dir2 {
    .rounded-#{$item3}-sm {
        border-#{$item1}-#{$item2}-radius: $border-radius-sm;
    }

    .rounded-#{$item3}-md {
        border-#{$item1}-#{$item2}-radius: $border-radius-md;
    }

    .rounded-#{$item3}-lg {
        border-#{$item1}-#{$item2}-radius: $border-radius-lg;
    }

    .rounded-#{$item3}-max {
        border-#{$item1}-#{$item2}-radius: $border-radius-max;
    }
}

@each $item1, $item2 in $dir1 {
    .border-#{$item2} {
        position: relative;
        &::after {
            @include harirline-common();
            border-#{$item1}: 1px solid $border-color;
        }
    }
    .border-#{$item2}-0 {
        &::after {
            border-#{$item1}: 0 !important;
        }
    }
}
@each $idx, $var in $pad {
    // 外间距
    .m-#{$idx} {
        margin: $var !important;
    }

    .m-x-#{$idx} {
        margin-left: $var !important;
        margin-right: $var !important;
    }

    .m-y-#{$idx} {
        margin-top: $var !important;
        margin-bottom: $var !important;
    }

    @each $item1, $item2 in $dir1 {
        .m-#{$item2}-#{$idx} {
            margin-#{$item1}: $var !important;
        }
    }

    // 内间距
    .p-#{$idx} {
        padding: $var !important;
    }

    .p-x-#{$idx} {
        padding-left: $var !important;
        padding-right: $var !important;
    }

    .p-y-#{$idx} {
        padding-top: $var !important;
        padding-bottom: $var !important;
    }

    @each $item1, $item2 in $dir1 {
        .p-#{$item2}-#{$idx} {
            padding-#{$item1}: $var !important;
        }
    }
}
@each $item1, $item2 in $color-list {
    .color-#{$item1} {
        color: $item2;
    }
    .bg-#{$item1} {
        background-color: $item2;
    }
    .border-#{$item1} {
        &::after {
            border-color: $item2 !important;
        }
    }
}

.border {
    position: relative;
    &::after {
        @include harirline-common();
        border: 1px solid $border-color;
    }
}
.color-default {
    color: $default;
}
$i: 1;
@while $i<=4 {
    .eps-#{$i} {
        @include eps($i);
    }

    $i: $i + 1;
}
// 公共布局
.layout-page {
    display: flex;
    flex-direction: column;
    height: 100%;
    font-size: $font-size-md;
}
.page-max {
    height: 100vh;
}
.layout-main {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1;
}
// 富文本容器
.edit-content {
    img {
        max-width: 100%;
        height: auto;
    }
}

.overflow-hidden {
    overflow: hidden;
}

.overflow-scroll {
    overflow: auto;
}

// 引入字体图标
@font-face {
    font-family: "iconfont";
    src: url("/static/fontIcon/iconfont.eot?t=1594112878280");
    src: url("/static/fontIcon/iconfont.eot?t=1594112878280#iefix") format("embedded-opentype"),
        url("/static/fontIcon/iconfont.woff?t=1594112878280") format("woff"),
        url("/static/fontIcon/iconfont.ttf?t=1594112878280") format("truetype"),
        url("/static/fontIcon/iconfont.svg?t=1594112878280#iconfont") format("svg");
}
// @font-face {
//     font-family: 'iconfont';  /* project id 2117085 */
//     src: url('//at.alicdn.com/t/font_2117085_ybg3mr2e4fo.eot');
//     src: url('//at.alicdn.com/t/font_2117085_ybg3mr2e4fo.eot?#iefix') format('embedded-opentype'),
//     url('//at.alicdn.com/t/font_2117085_ybg3mr2e4fo.woff2') format('woff2'),
//     url('//at.alicdn.com/t/font_2117085_ybg3mr2e4fo.woff') format('woff'),
//     url('//at.alicdn.com/t/font_2117085_ybg3mr2e4fo.ttf') format('truetype'),
//     url('//at.alicdn.com/t/font_2117085_ybg3mr2e4fo.svg#iconfont') format('svg');
//   }
.iconfont {
    font-family: "iconfont" !important;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
uni-page-body {
    height: 100%;
}
navigator {
    display: inline-block;
}
.app-nav {
    height: $status-bar;
}
.padding-nav {
    padding-top: $status-bar;
}

// ------覆盖组件样式------

.min-badge-count {
    background-color: $theme !important;
}
.u-switch--on {
    background-color: $theme !important;
}
